<template>
	<view class="page first-page">
		<view class="page-title">五险一金个税计算</view>
		<view class="content">
			<view class="padding-vertical-20 text-center">
				<radio-group v-model="salaryType" name="radio" @change="calTypeChange">
					<label>
						<radio value="wage" :checked="salaryType==='wage'" /><text>工资</text>
					</label>
					<label class="padding-left-20">
						<radio value="annualBonus" :checked="salaryType==='annualBonus'" /><text>年终奖</text>
					</label>
				</radio-group>
			</view>
			<view v-show="salaryType === 'wage'">
				<view class="form-item">
					<label class="item-label">税前工资</label>
					<view class="item-content">
						<input class="uni-input" name="input" v-model="grossPay" @input="grossPayChange" /><span class="item-unit">元</span>
					</view>
				</view>
				<view class="form-item">
					<label class="item-label">社保基数</label>
					<view class="item-content">
						<input class="uni-input" name="input" v-model="socialSecurityBase" /><span class="item-unit">元</span>
					</view>
				</view>
				<view class="form-item">
					<label class="item-label">公积金基数</label>
					<view class="item-content">
						<input class="uni-input" name="input" v-model="providentFundBase" /><span class="item-unit">元</span>
					</view>
				</view>
				<view class="form-item">
					<label class="item-label">五险一金比例</label>
					<view class="item-content">
						<input class="uni-input disabled-input" name="input" @click="expandFlag = !expandFlag" v-model="totalRate" disabled="true"  />
						<span class="item-unit">
							<text>&nbsp;%</text>
							<span v-show="!expandFlag">
								<uni-icons type="arrowdown" size="14"  @click="expandFlag = !expandFlag"></uni-icons>
							</span>
							<span v-show="expandFlag">
								<uni-icons type="arrowup" size="14"  @click="expandFlag = !expandFlag"></uni-icons>
							</span>
						</span>
					</view>
				</view>
				<!-- 五险一金比例 -->
				<view class="fiveInsuranceAndOneFund" v-show="expandFlag">
					<view class="form-item">
						<label class="item-label">养老</label>
						<view class="item-content">
							<input class="uni-input" name="input" v-model="endowmentRate" @input="fiveInsuranceAndOneFundChange" /><span class="item-unit">%</span>
						</view>
					</view>
					<view class="form-item">
						<label class="item-label">医疗</label>
						<view class="item-content">
							<input class="uni-input" name="input" v-model="medicaleRate" @input="fiveInsuranceAndOneFundChange" /><span class="item-unit">%</span>
						</view>
					</view>
					<view class="form-item">
						<label class="item-label">失业</label>
						<view class="item-content">
							<input class="uni-input" name="input" v-model="unemploymentRate" @input="fiveInsuranceAndOneFundChange" /><span class="item-unit">%</span>
						</view>
					</view>
					<view class="form-item">
						<label class="item-label">工伤</label>
						<view class="item-content">
							<input class="uni-input" name="input" v-model="injuryRate" @input="fiveInsuranceAndOneFundChange" /><span class="item-unit">%</span>
						</view>
					</view>
					<view class="form-item">
						<label class="item-label">生育</label>
						<view class="item-content">
							<input class="uni-input" name="input" v-model="birthRate" @input="fiveInsuranceAndOneFundChange" /><span class="item-unit">%</span>
						</view>
					</view>
					<view class="form-item">
						<label class="item-label">公积金</label>
						<view class="item-content">
							<picker @change="bindPickerChange" :value="index" :range="array">
							    <view class="uni-input">{{array[index]}}</view>
							</picker>
							<span class="item-unit">%</span>
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<label class="item-label">起征点</label>
					<view class="item-content">
						<input class="uni-input disabled-input" name="input" v-model="threshold" :disabled="!editFlag" /><span class="item-unit">元</span>
					</view>
				</view>
				<view class="form-item">
					<label class="item-label">专项附加扣除</label>
					<view class="item-content">
						<input class="uni-input" name="input" v-model="specialEduction" /><span class="item-unit">元</span>
					</view>
				</view>
			</view>
			<view v-show="salaryType === 'annualBonus'">
				<view class="form-item">
					<label class="item-label">税前收入</label>
					<view class="item-content">
						<input class="uni-input" name="input" v-model="annualPay" /><span class="item-unit">元</span>
					</view>
				</view>
			</view>
		</view>
		<view class="margin-top-10" v-show="salaryType === 'wage'">
			<uni-icons type="help-filled" color="orange" size="20"  @click="showTips"></uni-icons>&nbsp;
			<text>关于五险一金缴纳基数及比例等说明</text>
		</view>
		<view class="button-sp-area margin-top-20">
		    <button class="mini-btn" type="primary" @click="submitCalc">开始计算</button>
			<button class="mini-btn margin-top-20" type="primary" plain="true" @click="reset">重置</button>
		</view>
	</view>
</template>

<script>
import uniIcons from "@/components/uni-icons/uni-icons.vue"
export default {
	components: {uniIcons},
	data() {
		return {
			salaryType: 'wage',//工资或年终奖
			grossPay: '',//税前工资
			socialSecurityBase: '',//社保基数
			providentFundBase: '',//公积金基数
			threshold: 5000,//起征点
			specialEduction: 1000,//专项附加扣除
			totalRate: 15.3,//五险一金总比例
			endowmentRate: 8,//养老比例
			medicaleRate: 2,//医保比例
			unemploymentRate: 0.3,//失业
			injuryRate: 0,//工伤
			birthRate: 0,//生育
			providentFundRate: 5,//公积金比例
			
			annualPay: '',//年终奖
			editFlag: false,//是否可编辑
			array: [5, 6, 7, 8, 9, 10, 11, 12],
			index: 0,
			
			companySocialRate: 20.55,//公司五险总比例
			expandFlag: false,//默认折叠
		};
	},
	onLoad() {
		
	},
	methods: {
		//工资or年终奖
		calTypeChange(e){
			console.log(e.detail)
			this.salaryType = e.detail.value
		},
		//税前工资
		grossPayChange(e) {
			this.socialSecurityBase = e.detail.value
			this.providentFundBase = e.detail.value
		},
		//公积金比例
		bindPickerChange(e) {
			this.index = e.target.value
			this.providentFundRate = this.array[this.index]
			this.fiveInsuranceAndOneFundChange()
		},
		//五险一金比例
		fiveInsuranceAndOneFundChange(){
			//视图-模型更新有延迟
			setTimeout(()=>{
				let { endowmentRate, medicaleRate, unemploymentRate, injuryRate, birthRate, providentFundRate} = this
				this.totalRate = (endowmentRate * 1 || 0) + (medicaleRate * 1 || 0) + (unemploymentRate * 1 || 0) + (injuryRate * 1 || 0) + (birthRate * 1 || 0) + (providentFundRate * 1 || 0)
			},500)
		},
		//重置
		reset() {
			this.salaryType = 'wage'
			this.grossPay = ''
			this.socialSecurityBase = ''
			this.providentFundBase = ''
			this.threshold = 5000
			this.specialEduction = 1000
			this.totalRate = 15.3
			this.endowmentRate = 8
			this.medicaleRate = 2
			this.unemploymentRate = 0.3
			this.injuryRate = 0
			this.birthRate = 0
			this.providentFundRate = 5
			this.annualPay = ''
			this.companySocialRate = 20.55
			this.expandFlag = false
			this.index = 0
		},
		//开始计算
		submitCalc() {
			let { salaryType, grossPay, socialSecurityBase, providentFundBase, threshold, endowmentRate, medicaleRate, unemploymentRate, injuryRate, birthRate, providentFundRate, totalRate, companySocialRate, specialEduction, annualPay } = this
			//包含两位小数的正数校验
			let numberReg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
			//非负数校验
			let nonNegativeNumberReg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
			//计算工资
			if(salaryType === 'wage'){
				
				//校验税前工资、社保基数、公积金基数
				if(!grossPay || !socialSecurityBase || !providentFundBase){
					uni.showToast({
						icon:'none',
						title:'请输入税前工资、社保基数、公积金基数！'
					})
					return
				}
				if(!numberReg.test(grossPay) || !numberReg.test(socialSecurityBase) || !numberReg.test(providentFundBase)){
					uni.showToast({
						icon:'none',
						title:'税前工资、社保基数、公积金基数为大于0的数字且最多两位小数！'
					})
					return
				}
				uni.showLoading({
					title:'加载中...'
				})
				//个人应缴  默认：养老8% 医疗2% 失业0.3% 工伤0 生育0
				let endowmentPerson = parseInt(socialSecurityBase * endowmentRate / 100)
				let medicalePerson= parseInt(socialSecurityBase * medicaleRate / 100)
				let unemploymentPerson = parseInt(socialSecurityBase * unemploymentRate / 100)
				let injuryPerson = parseInt(socialSecurityBase * injuryRate / 100)
				let birthPerson = parseInt(socialSecurityBase * birthRate / 100)
				let providentFundPerson = parseInt(socialSecurityBase * providentFundRate / 100)
				console.log('个人养老保险：', endowmentPerson)
				console.log('个人医疗保险：', medicalePerson)
				console.log('个人失业保险：', unemploymentPerson)
				console.log('个人工伤保险：', injuryPerson)
				console.log('个人生育保险：', birthPerson)
				console.log('个人公积金：', providentFundPerson)
				
				//单位应缴 养老13% 医疗6.2% 失业0.7% 工伤0.2% 生育0.45%
				let endowmentCompany = parseInt(socialSecurityBase * 0.13)
				let medicaleCompany = parseInt(socialSecurityBase * 0.062)
				let unemploymentCompany = parseInt(socialSecurityBase * 0.007)
				let injuryCompany = parseInt(socialSecurityBase * 0.002)
				let birthCompant = parseInt(socialSecurityBase * 0.0045)
				let providentCompany = parseInt(socialSecurityBase * providentFundRate / 100)
				console.log('单位养老保险：', endowmentCompany)
				console.log('单位医疗保险：', medicaleCompany)
				console.log('单位失业保险：', unemploymentCompany)
				console.log('单位工伤保险：', injuryCompany)
				console.log('单位生育保险：', birthCompant)
				console.log('单位公积金：', providentCompany)
				
				//应纳税所得额=税前工资收入金额 - 五险一金（个人缴纳部分）- 起征点（默认5000元） - 专项附加扣除
				//应纳税额=应纳税所得额 * 税率 - 速算扣除数
				
				//应纳税所得额区间(六个数字分成7个区间)
				let personTax = [3000, 12000, 25000, 35000, 55000, 80000]
				//税率区间
				let taxRate = [0.03, 0.1, 0.2, 0.25, 0.3, 0.35, 0.45]
				//速算扣除数
				let quickCalcNumber = [0, 210, 1410, 2660, 4410, 7160, 15160]
				
				//五险一金个人缴纳部分
				let socialBenef = parseInt(socialSecurityBase * endowmentRate / 100 + socialSecurityBase * medicaleRate / 100 + socialSecurityBase * unemploymentRate / 100 + socialSecurityBase * providentFundRate / 100)
				console.log('五险一金个人缴纳：', socialBenef)
				//五险一金公司缴纳部分
				let socialBenefCompany = parseInt(endowmentCompany + medicaleCompany + unemploymentCompany + injuryCompany + birthCompant + providentCompany)
				//应纳税所得额
				let taxCount = parseInt(grossPay - socialBenef - threshold - specialEduction)
				console.log('应纳税所得额：',taxCount)
				//应纳税额
				let taxableAmount = 0
				if(taxCount > 0 && taxCount <= 3000){
					taxableAmount = parseInt(taxCount * taxRate[0] - quickCalcNumber[0])
				}else if(taxCount > 80000){
					taxableAmount = parseInt(taxCount * taxRate[6] - quickCalcNumber[6])
				}else{
					personTax.map((item, index) => {
						if(item < taxCount && taxCount <= personTax[index + 1]){
							//注意下标的差异
							taxableAmount = parseInt(taxCount * taxRate[index + 1] - quickCalcNumber[index + 1])
						}
					})
				}
				console.log('个人所得税：', taxableAmount)
				let personTotalPay = parseInt(socialBenef + taxableAmount)
				console.log('五险一金+个税个人缴纳：', personTotalPay)
				let afterTax = parseInt(grossPay - socialBenef - taxableAmount)
				console.log('税后工资：', afterTax)
				let companyTotalRate = companySocialRate + providentFundRate//公司缴纳五险一金占员工工资的总比例
				let calcResult = {
					endowmentPerson, medicalePerson, unemploymentPerson, injuryPerson, birthPerson, providentFundPerson,//五险一金个人应缴金额 
					endowmentCompany, medicaleCompany, unemploymentCompany, injuryCompany, birthCompant, providentCompany,//五险一金公司应缴金额
					grossPay, taxableAmount, afterTax, socialBenef, socialBenefCompany, salaryType,//税前 个税  税后 五险一金总额个人缴纳  五险一金总额公司缴纳  计算类型
					endowmentRate, medicaleRate, unemploymentRate, injuryRate, birthRate, providentFundRate, totalRate, companyTotalRate//五险一金比例
				}
				uni.hideLoading()
				uni.navigateTo({
					url:'./detail',
				})
				getApp().globalData.wageResult = calcResult
			}else{//计算年终奖
				//应纳税所得额=税前年终奖收入金额 / 12
				//应纳税额=全年奖金 * 税率 - 速算扣除数
				if(!annualPay){
					uni.showToast({
						icon:'none',
						title:'请输入年终奖金额!'
					})
					return
				}
				uni.showLoading({
					title:'加载中...'
				})
				//应纳税所得额区间(六个数字分成7个区间)
				let personTax = [3000, 12000, 25000, 35000, 55000, 80000]
				//税率区间
				let taxRate = [0.03, 0.1, 0.2, 0.25, 0.3, 0.35, 0.45]
				//速算扣除数
				let quickCalcNumber = [0, 210, 1410, 2660, 4410, 7160, 15160]
				//应纳税所得额(年终奖/12)
				let taxCount = parseInt(annualPay / 12)
				console.log('年终奖平均每月应纳税所得额：',taxCount)
				//应纳税额()
				let taxableAmount = ''
				if(taxCount <= 3000){
					taxableAmount = parseInt(taxCount * taxRate[0] - quickCalcNumber[0])
				}else if(taxCount > 80000){
					taxableAmount = parseInt(taxCount * taxRate[6] - quickCalcNumber[6])
				}else{
					personTax.map((item, index) => {
						if(item < taxCount && taxCount <= personTax[index + 1]){
							//注意下标的差异
							taxableAmount = parseInt(annualPay * taxRate[index + 1] - quickCalcNumber[index + 1])
						}
					})
				}
				let afterTax = parseInt(annualPay - taxableAmount)
				console.log('年终奖个人所得税：', taxableAmount)
				console.log('税后年终奖：', afterTax)
				let calcResult = {
					annualPay,
					taxableAmount,
					afterTax,
					salaryType,
				}
				uni.hideLoading()
				uni.navigateTo({
					url:'./detail',
				})
				getApp().globalData.wageResult = calcResult
			}
		},
		showTips(){
			uni.navigateTo({
				url: './showTips'
			})
		}
	}
};
</script>

<style lang="scss">
	
</style>
